/**
 * 准许报表页面
 * wangmei
 */
import React from 'react';
import echarts from 'echarts';
import { DatePicker, Button, Form, Row, Col, message, Spin } from 'antd';
import BreadcrumbCustom from '../../BreadcrumbCustom';
import * as Request from '../../../Server/Upgrade';
import * as ConstData from '../../../common/const';
import qs from 'qs';
import moment from 'moment';
import EchartsPage from './EchartPage';
import {REQUEST_SUCCESS,REQUEST_UNAUTHORIZED} from '../../../common/const';
const FormItem = Form.Item;
const dateFormat = 'YYYY-MM-DD';
const currentData = new Date();
let dataValue = moment(currentData).format(dateFormat);//时间信息

class Permission extends React.Component {
    constructor(props) {
        super(props);
        dataValue = moment(currentData).format(dateFormat); //时间信息
        this.state = {
            xData: [],
            yData: [],
            loading: false,
        }
    }

    componentWillMount() {
        this.getChartData(currentData);
    }

    getChartData = (value) => {
        this.setState({loading: true});
        const param = {
            date: moment(value).format(dateFormat),
            chartType: 'allowCount'
        }
        const _param = qs.stringify(param);
        Request.logStatusGetChart(_param).then(res => {
            if (res && res.code == REQUEST_SUCCESS) {
                let data = res.data.points;
                let xData = [];
                let yData = [];
                for (let i = 0; i < data.length; i++) {
                    let time = moment(data[i].x, 'HH:mm:ss').format('HH:mm:ss');
                    xData.push(time);
                    yData.push(data[i].y);
                }
                this.setState({
                    xData,
                    yData,
                    loading: false,
                })
            } else {
                this.setState({
                    loading: false,
                })
                res && res.code !== REQUEST_UNAUTHORIZED && message.error(res.msg);
            }
        })
    }

    onChange = (date, dateString) => {
        dataValue = dateString;
        // this.getChartData(dateString);
    }

    disabledDate = (current) => {
        // Can not select days before today and today
        return current && current.valueOf() > Date.now();
    }

    selectFunc = () => {
        this.getChartData(dataValue);
    }

    render() {
        const { xData, yData } = this.state;

        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 7 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 17 },
            },
        };
        const series = [{
            smooth: true,
            name: '准许',
            data: yData,
            type: 'line',
            barWidth: ConstData.STATISTIC_BAR_WIDTH,
            label: {
                normal: ConstData.LABEL_NORMAL
            },
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#4fc9e7'},
                            {offset: 1, color: '#61B1F8'},
                            {offset: 1, color: '#61B1F8'}
                        ]
                    ),
                }
            },
            lineStyle: {
                width: ConstData.STATISTIC_LINE_WIDTH,
            }
        }];

        return (
            <div style={{height: '100%'}}>
                <BreadcrumbCustom first={"准许报表"} />
                <Spin spinning={this.state.loading} >
                    <Form layout="inline" >
                        <FormItem
                            label="选择日期"
                        >
                            <DatePicker
                                defaultValue={moment(currentData, dateFormat)}
                                format={dateFormat}
                                placeholder="请选择日期"
                                onChange={this.onChange}
                                allowClear={false}
                                disabledDate={this.disabledDate}
                                locale={{
                                    "lang": {
                                        today: '今天',
                                        yearFormat: "YYYY年",
                                        monthSelect: "选择月份",
                                        yearSelect: "选择年份",
                                    }
                                }}
                            />
                        </FormItem>
                        <FormItem >
                            <Button type="primary" onClick={() => this.selectFunc()}>查询</Button>
                        </FormItem>
                    </Form>
                    <EchartsPage
                        formatter={moment(dataValue).format('YYYY年MM月DD日') + '<br />{b}<br />{a} : {c}'}
                        title={'准许报表'}
                        xName="时间"
                        yName="数量"
                        xData={xData}
                        series={series}
                        legendData={['准许']}
                    />
                </Spin>
            </div>
        )
    }
}

export default Permission;
